<script setup lang="ts">
import { LayerType } from '@/types/index.d.ts'
import { onMounted, getCurrentInstance } from 'vue'
import { defaultMapStore } from '@/store'
import Map from 'ol/Map'
import View from 'ol/View'
import { Layer, Vector as VectorLayer } from 'ol/layer'
import { Vector as VectorSource } from 'ol/source'
import Feature from 'ol/Feature'
import { Geometry, LineString } from 'ol/geom'
import { fromLonLat } from 'ol/proj'
import { Attribution, defaults } from 'ol/control'
import OverLay from 'ol/Overlay'
import { GeoJSON, TopoJSON } from 'ol/format'
import { Style, Stroke } from 'ol/style'
import { DragAndDrop, Interaction, defaults as defaultsInteraction } from 'ol/interaction'

const prefix = import.meta.env.VITE_BASE_URL
const { proxy }: any = getCurrentInstance()
const geojson: GeoJSON = new GeoJSON()
let map
onMounted(() => _createMapView())
function _createMapView() {
  const view: View = new View({
    center: fromLonLat([120.535824, 28.009289]),
    zoom: 4.3,
  })

  const attribution1: Attribution = new Attribution({
    target: proxy.$refs.attribute,
    className: 'copyright_view'
  })
  const attribution2: Attribution = new Attribution({
    target: proxy.$refs.attribute,
    className: 'map_source_view'
  })
  // const anchor: OverLay = new OverLay({
  //   element: proxy.$refs.anchor,
  //   position: fromLonLat([120.535824, 28.009289]),
  //   positioning: 'bottom-center',
  // })
  const cordon24 = new LineString([fromLonLat([127, 34]),
  fromLonLat([127, 22]), fromLonLat([119, 18]), fromLonLat([119, 11]),
  fromLonLat([113, 4.5]), fromLonLat([105, 0])])
  const cordon48 = new LineString([fromLonLat([132, 34]),
  fromLonLat([132, 15]), fromLonLat([120, 0]), fromLonLat([105, 0])])
  const cordon24Layer = new VectorLayer({
    source: new VectorSource({
      features: [new Feature({
        geometry: cordon24
      })],
    }),
    style: new Style({
      stroke: new Stroke({
        color: 'red',
        width: 1,
      })
    }),
    properties: {
      name: 'cordon'
    }
  })
  const cordon48Layer = new VectorLayer({
    source: new VectorSource({
      features: [new Feature({
        geometry: cordon48
      })]
    }),
    style: new Style({
      stroke: new Stroke({
        color: 'green',
        width: 1,
        lineDash: [15, 3]
      })
    }),
    properties: {
      name: 'cordon'
    }
  })
  const dragAndDropInteraction = new DragAndDrop({
    formatConstructors: [
      GeoJSON, TopoJSON
    ]
  })
  // defaultMapStore().setAnchor(anchor)
  map = new Map({
    target: 'map',
    // controls: defaults({
    //   attribution: false,
    //   rotate: false,
    //   zoom: false
    // }).extend([attribution1, attribution2]),
    layers: [
      proxy.$addTiandituLayer(LayerType.矢量底图),
      proxy.$addTiandituLayer(LayerType.矢量注记),
      cordon24Layer,
      cordon48Layer
    ],
    view,
    // overlays: [anchor],
    interactions: defaultsInteraction().extend([dragAndDropInteraction])
  })
  // 添加要素添加到地图的拖放交互
  addFeaturesEvent(dragAndDropInteraction, map)
  const ele24 = document.createElement('view')
  const ele48 = document.createElement('view')
  ele24.innerHTML = '24小时警戒线'
  ele48.innerHTML = '48小时警戒线'
  // map.addOverlay(new OverLay({
  //   element: ele24,
  //   className: 'cordon24',
  //   stopEvent: false,
  //   offset: [5, 20],
  //   position: fromLonLat([127, 34])
  // }))
  // map.addOverlay(new OverLay({
  //   element: ele48,
  //   className: 'cordon48',
  //   stopEvent: false,
  //   offset: [5, 20],
  //   position: fromLonLat([132, 34])
  // }))
  proxy.axios.get('https://geo.datav.aliyun.com/areas_v3/bound/330300.json').then((res: any) => {
    const features: Feature<Geometry>[] = geojson.readFeatures(res.data) as Feature<Geometry>[]
    features[0].getGeometry()!.transform('EPSG:4326', 'EPSG:3857')
    const source = new VectorSource({
      features
    })
    const layer = new VectorLayer({
      source,
      style: new Style({
        stroke: new Stroke({
          color: 'blue',
          width: 3,
        }),
      }),
      properties: {
        name: '地区图层'
      }
    })
    map.addLayer(layer)
  })
  defaultMapStore().setMap(map)
  defaultMapStore().setToggleCenter(fromLonLat([120.535824, 28.009289]))
  map.on('loadend', () => {
    // 监听鼠标移动事件，鼠标移动到feature区域时变为手形
    map.on('pointermove', function (e) {
      map.getAllLayers().forEach((layer: Layer) => {
        if (layer.get('name') === '台风路径') {
          const pixel = map.getEventPixel(e.originalEvent)
          const hit = map.hasFeatureAtPixel(pixel)
          map.getTargetElement().style.cursor = hit ? 'pointer' : ''
        }
      })
    })
  })
}
const addFeaturesEvent = (interaction: DragAndDrop, map: Map) => {
  interaction.on('addfeatures', (e: any) => {
    const vSource = new VectorSource({
      features: e.features
    })
    map.addLayer(new VectorLayer({
      source: vSource
    }))
    map.getView().fit(vSource.getExtent())
  })
}
</script>

<template>
  <view id="map"></view>
  <view class="anchor" ref="anchor">
    <img v-lazy="prefix + '/images/position.png'" alt="图标" />
  </view>

  <view class="attribute-position" ref="attribute">
    <view class="copyright_view">©温州市气象局</view>
    <view class="map_source_view">审图号GS(2018)2236号</view>
  </view>
</template>

<style lang="scss">
@import '@/assets/mixin.scss';

#map {
  width: 100%;
  height: 100vh;
}

.anchor {
  img {
    transform-origin: bottom;
    transform: scale(0.12);
    cursor: pointer;
    user-select: none;
  }
}

.cordon24 {
  color: red;
  font: 0.37037rem 宋体;
  text-align: center;
  width: 0.37037rem;
  line-height: 0.37037rem;
  user-select: none;
}

.cordon48 {
  color: green;
  font: 0.37037rem 宋体;
  text-align: center;
  width: 0.37037rem;
  line-height: 0.37037rem;
  user-select: none;
}

.attribute-position {
  @include positionTopRight(absolute, calc(100% - 0.46296rem), 0);
  width: 100%;
  z-index: 999;
  @include flex(space-between, center);
  padding: 0 0.37037rem;

  .copyright_view {
    @include wHbgc(2.22222rem, 0.37037rem, rgba(255, 255, 255, .9));
    text-align: center;
    border-radius: 0.16rem;
    font-size: 0.2rem;
  }

  .map_source_view {
    height: 0.37037rem;
    font-size: 0.2rem;
    color: #808080;
  }
}
</style>
